<template>
  <div>
    <el-button type="primary" @click ="modInfo">修改个人信息</el-button>

      <modInfoPage v-if="isModInfoPage" 
        v-bind:user_pic="user_pic" 
        v-bind:nickname="nickname" 
        v-bind:username="username"
        v-bind:email="email"
        v-bind:user_id="user_id"></modInfoPage>
  </div>
</template>

<script>
import modInfoPage from '@/components/modInfoPage'
export default {
  components:{
    modInfoPage
  },

  data(){
    return {
      user_pic: '',
      nickname: '',
      username: '',
      email:'',
      user_id:'',

      isModInfoPage : false
    }
  },

  methods:{
    async modInfo(){
      //测试用 token 值
      this.$cookie.set( "token" ,'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NCwidXNlcm5hbWUiOiJ0ZXN0IiwicGFzc3dvcmQiOiIiLCJuaWNrbmFtZSI6Iua1i-ivleeUqOS-iyIsImVtYWlsIjoidGVzdDEyMzQ1NkBxcS5jb20iLCJ1c2VyX3BpYyI6IiIsImlhdCI6MTY1MTI5MjQ1MiwiZXhwIjoxNjUxMzI4NDUyfQ.2SEMpNAUmt3D8QvLZd06gQ9GHAVZuU3u7t2F9jFbxuY', 1)

      const token = this.$cookie.get('token')
      this.$http.interceptors.request.use(function (config) {
        config.headers.Authorization = token
        return config;
      }, function (error) {
        return Promise.reject(error);
      });

      const res = await this.$http.get('/my/userinfo')

      if(res.data.status === 1)
      {
         this.$alert('请先登录！！！', '', {
          confirmButtonText: '确定',
        })
      }else{
        this.user_pic = res.data.data.user_pic
        this.nickname = res.data.data.nickname
        this.username = res.data.data.username
        this.email = res.data.data.email
        this.user_id = res.data.data.id

        this.isModInfoPage = true
        console.log(this.user_id);
      }
    }
  }
}
</script>

<style>

</style>